<template>
	<view class="page">
		<PageHeader :showPlaceHolder="false" :customTitle="customTitle"></PageHeader>
		<view class="page-content">
			<fui-swiper-dot class="swiper-dot" :items="detailData.sliderPicUrls" :styles="swiperStyles"
				:current="currSwiper">
				<swiper class="fui-banner__wrap" @change="changeSwiper" circular :indicator-dots="false" autoplay
					:interval="4000" :duration="150">
					<swiper-item  class="goods-swiper-item" v-for="(item, index) in detailData.sliderPicUrls" :key="index">
						<view class="fui-banner__item">
							<image style="backgroundColor: antiquewhite;" class="page-content-image goods-swiper-image" :src="item" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</fui-swiper-dot>
      <view class="reject-wrapper" v-if="curSupplierTab === 2 || curChildTab === 2">
        <view class="reject-title"><fui-icon name="clear-fill" size="40" color="#e9574f"></fui-icon> 驳回原因：</view>
        <view class="reject-reason">{{ detailData.auditMsg }}</view>
      </view>
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<view class="card-title">
						<view class="card-title-text"><view class="supplier-tag" v-if="userType == 1 && detailData.isSelfManage === 'Y'">自营</view>{{ detailData.name }}</view>
					</view>
					<view class="card-row card-title-row">
            <view class="card-row-category">
              <text class="card-label">分类：</text>
              <text class="">{{ detailData.productCategory }}</text>
            </view>
            <view class="card-row-price">
							<text>￥</text>
							<text
								class="card-title-price-text">{{ utils.moneyFormatter(price / 100) }}</text>
							<text>/{{detailData.unit}}</text>
						</view>
					</view>
				</template>
			</CardComponent>
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<view class="card-row card-row-first" v-if="detailData.fhdmc">
						<text class="card-label w120">发货地</text>
						<text class="card-value">{{ detailData.fhdmc }}</text>
					</view>
					<view class="card-row">
						<text class="card-label w120">运费模板</text>
						<text class="card-value">{{ detailData.yfmbmc }}</text>
					</view>
					<view class="card-row" v-if="detailData.wlzl">
						<text class="card-label w120">物流重量</text>
						<text class="card-value">{{ detailData.wlzl }}</text>
						<text class="card-value card-unit">kg/{{ detailData.unit }}</text>
					</view>
					<view class="card-row">
						<text class="card-label w120">商品库存</text>
						<text class="card-value">{{ detailData.stock }}</text>
						<text class="card-value card-unit" size="24">{{ detailData.unit }}</text>
					</view>
					<view class="card-row">
						<text class="card-label w120">起售数量</text>
						<text class="card-value">{{ detailData.prices?detailData.prices[0].startNum:''}}</text>
						<text class="card-value card-unit">{{detailData.unit}}</text>
					</view>
					<view class="card-row" v-if="userType == 2">
						<text class="card-label" style="margin-right: 20rpx;">成本价格</text>
						<fui-text text="￥" size="28" color="#666"></fui-text>
						<fui-text :text="utils.moneyFormatter(detailData.costPrice / 100)" size="28" color="#333"></fui-text>
						<text class="card-value card-unit">/{{detailData.unit}}</text>
					</view>
					<view class="card-row">
						<view class="">
							<text class="card-label w120">价格组</text>
						</view>
						<view class="card-region" v-for="item in detailData.prices" :key="item.value2">
							<view class="card-region-row">
								<view class="region-item">
									<text class="region-label">起售数量：</text>
									<text class="region-value">{{ item.startNum }}{{detailData.unit}}</text>
								</view>
								<view class="region-item">
									<text class="region-label">起售价格：</text>
									<text class="region-value region-color">￥</text>
									<text class="region-value region-color region-price">
										{{ utils.moneyFormatter((detailData.status == 1 && item.realPrice) ? item.realPrice / 100 : item.price / 100)  }}</text>
									<text class="region-value region-color">/{{detailData.unit}}</text>
								</view>
							</view>
							<!-- <view class="card-region-row card-region-lastrow">
								<view class="region-item">
									<text class="region-label">成本价格：</text>
									<text class="region-value region-color">￥</text>
									<text
										class="region-value region-color region-price">{{ utils.moneyFormatter(item.costPrice / 100)  }}</text>
									<text class="region-value region-color">/{{detailData.unit}}</text>
								</view>
							</view> -->
						</view>
					</view>
				</template>
			</CardComponent>

			<view class="model-title">详情介绍</view>
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<view class="card-row" style="margin-bottom: 20rpx;" v-if="detailData.basics && detailData.basics.length">
						<view class="card-region card-region-top">
							<view class="card-region-box">
								<view class="region-item" v-for="item in detailData.basics" :key="item.id">
									<text class="region-label">{{item.name}}：</text>
									<text class="region-value">{{ item.value }}</text>
								</view>
							</view>
						</view>
					</view>
					<text class="description mb20">
						{{detailData.description}}
					</text>
					<image v-for="item in detailData.picUrl" class="detail-image" style="backgroundColor: antiquewhite;"
						:src="item" mode="widthFix">
					</image>
				</template>
			</CardComponent>

			<view class="model-title">售后须知</view>
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<text class="description">
						{{detailData.afterSaleAlert}}
					</text>
				</template>
			</CardComponent>

			<view class="model-title">交易须知</view>
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<text class="description">
						{{detailData.tradeAlert}}
					</text>
				</template>
			</CardComponent>

			<!-- 供应链直供商品，已下架不显示按钮 -->
			<view class="btn-box">
				<template v-if="userType === '1'">
					<!-- 待审核 -->
					<view class="submit-btn1" v-if="detailData.auditState == 0">
						<!-- <fui-button class="btn" width="25vw" @click="setPrice" height="78rpx" color="#333333" plain
							borderColor="#707070" text="设置售价"></fui-button> -->
						<fui-button class="btn" width="25vw" @click="turnDown" height="78rpx" color="#F95A5A" plain
							borderColor="#F95A5A" text="驳回"></fui-button>
						<fui-button class="btn" width="25vw" disabledBackground="#EFEFEF" disabledColor="#6e6e6e"
							@click="handleToResolve" height="78rpx" background="#F95A5A" text="通过"></fui-button>
					</view>
					<!-- 已上架 -->
					<view class="submit-btn" v-if="detailData.status == 1">
						<fui-button @click="delistGoods" class="btn" width="100%" height="78rpx" background="#EA5750"
							text="下架"></fui-button>
					</view>
				</template>
				<template v-if="userType === '2' && curSupplierTab != 4">
					<!-- 待审核 -->
					<view class="submit-btn" v-if="detailData.status != 0 && detailData.auditState == 0">
						<fui-button @click="cancelListing" class="btn" width="100%" height="78rpx" background="#EA5750"
							text="取消申请"></fui-button>
					</view>
					<!-- 已上架 -->
					<view class="submit-btn" v-if="detailData.status == 1">
						<fui-button @click="delistGoods" class="btn" width="100%" height="78rpx" background="#EA5750"
							text="下架"></fui-button>
					</view>
					<!-- 已驳回 -->
					<view class="submit-btn1" v-if="detailData.status != 0 && detailData.auditState == 2">
						<fui-button class="btn" width="25vw" @click="editGoods(detailData.id)" height="78rpx" color="#333333" plain
							borderColor="#707070" text="编辑"></fui-button>
						<fui-button class="btn" width="25vw" @click="jumpNewRelease" height="78rpx" background="#F95A5A"
							text="上架"></fui-button>
					</view>
					<!-- 已下架 -->
					<view class="submit-btn1" v-if="detailData.status == 0">
						<fui-button class="btn" width="25vw" @click="removedGoods" height="78rpx" color="#333333" plain
							borderColor="#707070" text="移除"></fui-button>
						<fui-button class="btn" width="25vw" @click="displayPopup" height="78rpx" color="#333333" plain
							borderColor="#707070" text="改价"></fui-button>
						<fui-button v-if="detailData.auditState == 0" @click="cancelListing" class="btn" width="100%" height="78rpx" background="#EA5750"
							text="取消申请"></fui-button>
						<fui-button v-if="detailData.auditState == 2" class="btn" width="25vw" @click="editGoods(detailData.id)" height="78rpx" color="#333333" plain
							borderColor="#707070" text="编辑"></fui-button>
						<fui-button class="btn" width="25vw" @click="jumpNewRelease" height="78rpx" background="#F95A5A"
							text="上架"></fui-button>
					</view>
				</template>
				<template v-if="userType === '2' && curSupplierTab == 4">
					<!-- 商品目录 -->
					<view class="submit-btn1" v-if="curSupplierTab == 4">
						<fui-button class="btn" width="25vw" @click="removedGoods" height="78rpx" color="#333333" plain
							borderColor="#707070" text="移除"></fui-button>
						<fui-button class="btn" width="25vw" @click="editGoods(detailData.id)" height="78rpx"
							background="#F95A5A" text="编辑"></fui-button>
					</view>
				</template>
			</view>
		</view>
		<fui-dialog :buttons="[
				{ text: '取消', color: '#999999' },
				{ text: '确定', color: '#465CFF' }
			]" :show="showDialog" :title="dialogText" maskClosable @click="clickDialog"
			@close="showDialog = false"></fui-dialog>
	</view>
</template>

<script setup>
	import PageHeader from '@/components/header';
	import CardComponent from '@/components/card/normal';
	import utils from '@/components/firstui/fui-utils'
	import {
		ref,
		inject,
		watch
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import goodsApi from '@/api/goods';
	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const tab = inject('$tab');
	const modal = inject('$modal');

	const detailData = ref({});
	const showDialog = ref(false);
	const currSwiper = ref(0); //当前轮播图

	const swiperStyles = {
		activeBackground: '#FFFFFF'
	};

	const dialogText = ref('');

	// 商品状态: status  0 下架（禁用） 1 上架（开启）-1 回收  2待上架
	// 商品审核状态: auditState  0 待审核 1 通过 2 驳回
	const curChildTab = ref();
	// 商品类型 0自营商品 1直供商品   ---供应链
	const curParentTab = ref(0);
	// 标题
	const customTitle = ref('');
	const curSupplierTab = ref(0) //---供应商
	// 商品id
	const productId = ref()
	const userType = ref(1) //供应链是1 供应商是2
	onLoad((option) => {
		curParentTab.value = option.curParentTab * 1;
		curChildTab.value = option.curChildTab * 1;
		productId.value = option.id * 1
		curSupplierTab.value = option.curSupplierTab * 1
		userType.value = store.getters.userType //供应链是1 供应商是2
		setCustomTitle();
		// 获取详情
		store.dispatch('getGoodsDetail', productId.value)
		store.commit('SET_DETAIL_AGREE', false)
	});

	const setCustomTitle = () => {
		if (userType.value == 2) {
			switch (curSupplierTab.value) {
				case 0:
					customTitle.value = '已上架';
					break;
				case 1:
					customTitle.value = '审核中';
					break;
				case 2:
					customTitle.value = '已驳回';
					break;
				case 3:
					customTitle.value = '已下架';
					break;
				default:
					customTitle.value = '商品信息';
					break;
			}
		} else {
			switch (curChildTab.value) {
				case 0:
					customTitle.value = '已上架';
					break;
				case 1:
					customTitle.value = '待审核';
					break;
				case 2:
					customTitle.value = '已驳回';
					break;
				case 3:
					customTitle.value = '已下架';
					break;
				default:
					customTitle.value = '商品信息';
					break;
			}
		}
	}

	// 当前轮播图改变
	const changeSwiper = (e) => {
		currSwiper.value = e.detail.current;
	};

	// 监听refreshDetailFlag，新增，新品上架后刷新详情
	watch(
		() => store.getters.refreshDetailFlag,
		() => {
			// 获取详情
			store.dispatch('getGoodsDetail', productId.value)
		},
	);

	// 详情内容赋值
  const price = ref(0)
	watch(
		() => store.getters.detailData,
		() => {
			detailData.value = store.getters.detailData
			if (detailData.value.prices && detailData.value.prices[0]) {
				detailData.value.costPrice = detailData.value.prices[0].costPrice
			}
      //供应链是1 供应商是2
			price.value = (detailData.value.status == 1 && detailData.value.prices[0].realPrice) ? detailData.value.prices[0].realPrice : detailData.value.prices[0].price
		}
	)

	// 改价
	const displayPopup = () => {
		uni.navigateTo({
			url: `/pages/goods/price?isSetPrice=false&unit=${detailData.value.unit}`
		});
	};

	// 设置售价
	const setPrice = () => {
		if (store.getters.detailAgree) {
			modal.confirm('售价已设置，是否要重新设置售价？').then(() => {
				uni.navigateTo({
					url: `/pages/goods/price?isSetPrice=true&unit=${detailData.value.unit}`
				});
			})
		} else {
			uni.navigateTo({
				url: `/pages/goods/price?isSetPrice=true&unit=${detailData.value.unit}`
			});
		}
	};

	// 上架
	const jumpNewRelease = () => {
		uni.navigateTo({
			url: `/pages/goods/newRelease?isDetail=true`
		});
	};

	const controls = ref(0);
	// 移除
	const removedGoods = () => {
		if (detailData.value.stock > 0) {
			dialogText.value = `当前商品库存大于0，不允许移除！`;
			controls.value = 0;
		} else if (detailData.value.status == 1) {
			dialogText.value = `当前商品已上架商城，不允许移除！`;
			controls.value = 0;
		} else {
			dialogText.value = `您确认移除商品【${detailData.value.name}】？`;
			controls.value = 1;
		}
		showDialog.value = true;
	};
	// 下架
	const delistGoods = () => {
		dialogText.value = `您确认下架商品【${detailData.value.name}】？`;
		controls.value = 2;
		showDialog.value = true;
	};

	// 驳回
	const turnDown = () => {
		// dialogText.value = `您确认要审核驳回商品【${detailData.value.name}】上架申请 ?`;
		// controls.value = 3;
		// showDialog.value = true;
    tab.navigateTo(`/pages/goods/reject?id=${productId.value}`)
	};

	// 通过
	const handleToResolve = () => {
		// if (store.getters.detailAgree) {
		// 	dialogText.value = `您确认要审核通过商品【${detailData.value.name}】上架申请 ？`;
		// 	controls.value = 4;
		// } else {
		// 	dialogText.value = `请设置售价之后再通过`;
		// 	controls.value = 0;
		// }
		// showDialog.value = true;
		tab.navigateTo(`/pages/goods/price?productId=${productId.value}&isSetPrice=true&unit=${detailData.value.unit}&defaultRatio=${detailData.value.fzbl}`)
	};

	// 取消申请
	const cancelListing = () => {
		dialogText.value = `您确认取消商品【${detailData.value.name}】的上架申请？`;
		controls.value = 5;
		showDialog.value = true;
	};

	// 编辑
	const editGoods = (id, ) => {
		const {
			status,
			auditState
		} = detailData.value

		// if (userType.value == 1 || (userType.value == 2 && (status == 0 && (auditState == 2 ||
		// 		auditState == 4) || (status == 2 && (auditState == 2 ||
		// 		auditState == 4))))) {
		// 	uni.navigateTo({
		// 		url: `/pages/goods/addGoods?id=${id}&curParentTab=${curParentTab.value}&productCategory=${detailData.value.productCategory}`
		// 	});
		// } else {
		// 	dialogText.value = `请取消上架之后编辑`;
		// 	controls.value = 0;
		// 	showDialog.value = true;
		// }

		if ((auditState == 1 && status == 1) || (auditState === 0)) {
			dialogText.value = `请取消上架之后编辑`;
			controls.value = 0;
			showDialog.value = true;
		} else {
			uni.navigateTo({
				url: `/pages/goods/addGoods?id=${id}&curParentTab=${curParentTab.value}&productCategory=${detailData.value.productCategory}`
			});
		}
	};

	// 确认下架和移除 
	const removeProduct = (status) => {
		try {
			goodsApi.removeProduct({
				id: productId.value,
				status, //状态 0=下架，1=上架，-1=移除，2=取消上架申请
			}).then((res) => {
				if (res.code === 0) {
					modal.msgSuccess(status === -1 ? '移除成功' : '下架成功')
					store.commit('SET_REFRESH_FLAG', !store.getters.refreshFlag) //列表页面刷新
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				} else {
					modal.msgError(res.msg)
				}
			})
		} catch (e) {
			console.log('removeProduct ===>', e);
		}
	}


	// 审核上架    "auditState": 1, //审批状态1通过  2驳回
	const examineGoods = (auditState) => {
		try {
			const editPrices = detailData.value.prices.map((item) => {
				return {
					pricesId: item.id,
					priceAfter: item.price
				}
			})
			goodsApi.doAudit({
				id: productId.value, //商品id
				auditState,
				editPrices: editPrices
			}).then((res) => {
				if (res.code === 0) {
					modal.msgSuccess(auditState === 1 ? '商品已通过审核' : '驳回成功')
					store.commit('SET_REFRESH_FLAG', !store.getters.refreshFlag) //列表页面刷新
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				} else {
					modal.msgError(res.msg)
				}
			})
		} catch (e) {
			console.log('examineGoods ===>', e);
		}
	}


	// 确认取消申请 
	const cancelListingSure = () => {
		try {
			goodsApi.cancelListing(productId.value).then((res) => {
				if (res.code === 0) {
					modal.msgSuccess('取消成功')
					store.commit('SET_REFRESH_FLAG', !store.getters.refreshFlag)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				} else {
					modal.msgError(res.msg)
				}
			})
		} catch (e) {
			console.log('cancelListingSure ===>', e);
		}
	}


	// 对话框
	const clickDialog = (e) => {
		if (e.index === 0) {
			// 取消
			showDialog.value = false;
		} else {
			// 确认
			switch (controls.value) {
				case 1:
					// 移除
					removeProduct(-1)
					break;
				case 2:
					// 下架
					removeProduct(0)
					break;
				case 3:
					// 驳回
					examineGoods(2)
					break;
				case 4:
					// 通过
					examineGoods(1)
					break;
				case 5:
					// 取消申请
					cancelListingSure()
					break;
				default:
					break;
			}
			showDialog.value = false;
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		background-color: #f2f4f5;
		min-height: 100%;

		&-content {
			width: calc(100% - 56rpx);
			margin: 0 auto;
			padding-bottom: 150rpx;

			&-image {
				width: 100vw;
			}
		}

		.card-label.w120 {
			width: 120rpx;
		}

    .reject-wrapper {
      margin-top: 24rpx;
      background-color: rgba(233, 87, 79, .1);
      border-radius: 12rpx;
      padding: 24rpx;
      .reject-title {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #e9574f;
        .fui-icon {
          margin-right: 5rpx;
        }
      }
      .reject-reason {
        font-size: 28rpx;
        color: #e9574f;
      }
    }

		.supplier-tag {
			display: inline;
			height: 32rpx;
			background-color: #f95a5a;
			border-radius: 8rpx;
			margin-right: 5rpx;
			padding: 2rpx 10rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			font-weight: normal;
			color: #fff;
		}

		.card {
			margin-top: 20rpx;

			&-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				color: #e9574f;
				font-weight: bold;

				&-text {
					color: #333333;
				}

				&-price {
					font-size: 28rpx;

					&-text {
						font-size: 44rpx;
						display: inline-block;
						margin: 0 8rpx 0 2rpx;
					}
				}
			}

			&-row {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				margin-top: 16rpx;

        &.card-title-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .card-row-price {
            font-size: 28rpx;
            color: #e9574f;

            .card-title-price-text {
              font-size: 44rpx;
              font-weight: bold;
              display: inline-block;
              margin: 0 8rpx 0 2rpx;
            }
          }
        }

				&-first {
					margin: 0;
				}
			}

			&-label {
				display: inline-block;
			}

			&-value {
				font-weight: 400;
				color: #666666;
				margin-left: 20rpx;
			}

			&-unit {
				margin-left: 8rpx;
			}

			&-region {
				width: 100%;
				background: #f2f8ff;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 20rpx 40rpx;
				margin-top: 12rpx;
				box-sizing: border-box;

				&-row {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.region-item {
						min-width: 50%;
						font-size: 24rpx;
						font-weight: 400;
						margin-bottom: 24rpx;

						.region-label {
							color: #666666;
						}

						.region-value {
							color: #333333;
						}

						.region-color {
							color: #e9574f;
							font-size: 28rpx;
							font-weight: bold;
						}

						.region-price {
							margin: 0 8rpx 0 6rpx;
						}
					}
				}

				&-lastrow {
					.region-item {
						margin-bottom: 0rpx;
					}
				}
			}
		}

		.description {
			display: block;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			&.mb20 {
				margin-bottom: 20rpx;
			}
		}

		.model-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.detail {
			background-color: #ffffff;
			// margin-left: -28rpx;
			// width: 100vw;

			&-image {
				width: 100%;
				// height: 1760rpx;
			}
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			right: 0;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			.submit-btn {
				display: flex;
				justify-content: space-between;
				width: 100%;
			}


			.submit-btn1 {
				display: flex;
				justify-content: flex-end;
				width: 100%;
				overflow: hidden;

				.btn {
					flex: 1;
					width: auto !important;
					max-width: 160rpx;
					&:not(:last-child) {
						margin-right: 20rpx !important;
					}
					::v-deep .fui-button {
						width: auto !important;
						max-width: 160rpx;
					}
				}
			}
		}

		.submit-btn2 {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-top: 36rpx;

			.btn {
				font-weight: 400;
			}
		}

		/* 自定义内容区样式需自行控制 */
		.fui-custom__wrap {
			width: 100%;
			height: 490rpx;
			display: flex;
			flex-direction: column;
			padding: 34rpx 36rpx 76rpx;
			box-sizing: border-box;
			font-weight: bold;

			.content {
				padding: 0 36rpx;
				box-sizing: border-box;

				.row {
					display: flex;
					align-items: center;
					margin: 32rpx 0 20rpx;
				}

				.title {
					font-size: 32rpx;
					color: #333333;
				}

				.label {
					font-size: 28rpx;
					color: #333333;
					margin-right: 36rpx;
				}

				.value {
					font-size: 44rpx;
					color: #e9574f;
					margin: 0 8rpx 0 2rpx;
				}

				.unit {
					font-size: 28rpx;
					color: #e9574f;
				}

				.input {
					margin-top: 14rpx;
					font-weight: 400;
				}
			}
		}

		.fui-banner__item {
			width: 100%;
			height: 434rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			font-weight: 600;
		}

		.fui-banner__wrap {
			height: 434rpx;
			width: 100%;
      .goods-swiper-item {
        background-color: #fff;
        .goods-swiper-image {
          width: 100%;
          min-height: 100%;
          height: 100%;
        }
      }
		}

		.swiper-dot {
			width: 100vw;
			margin-left: -28rpx;
			height: 434rpx;
		}

		.card-region-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.region-item {
				width: 50%;
				margin-bottom: 24rpx;
			}
		}

		.card-region-top {
			padding-bottom: 0;
		}
	}
</style>